<template>
  <div class="goodsActivity-table__container">
    <!-- 表格部分 -->
    <el-table :data="courseData" height="300">
      <!-- <el-table-column label="序号" type="index" width="50"> </el-table-column> -->
      <el-table-column
        prop="courseName"
        label="课程图片"
        min-width="100"
        align="center"
      >
        <template slot-scope="scope">
          <div class="img-box">
            <el-image :src="scope.row.coverImage"></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="课程名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="type"
        label="课程类型"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="70">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDelete(scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: ['courseData'],
  data() {
    return {}
  },
  methods: {
    // 删除操作
    handleDelete(index) {
      this.$emit('deleteCourse', index)
    }
  }
}
</script>

<style lang="less" scoped>
.goodsActivity-table__container {
  margin: 0 0 18px 100px;
  .img-box {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 1px solid #ddd;
    .el-image {
      width: 100%;
      height: 100%;
    }
    img {
      max-width: 100%;
      max-height: 100%;
      cursor: pointer;
    }
  }
}
</style>
